<template>
	<view class="forget_view">
		<view class="fill"></view>
		<view class="data_form">
			<view class="title">找回密码</view>
			<view class="regin_form" v-show="step_num==1">
				<form @submit="sendMail">
					<view class="form_inputs">
						<view class="input_left">
							<icon class="iconfont">&#xe641;</icon>
						</view>
						<view class="input_right">
							<input type="text" name="UserEmail" />
						</view>
					</view>
					<view class="form_inputs">
						<button form-type="submit">提交邮箱地址</button>
					</view>
				</form>
			</view>
			<view class="regin_form" v-show="step_num==2">
				<form @submit="confirmMsg">
					<view class="form_inputs">
						<view class="input_left">
							<uni-icon type="chat" size="20" color="white"></uni-icon>
						</view>
						<view class="input_right">
							<input type="text" name="UserEmail" />
						</view>
					</view>
					<view class="form_inputs">
						<button :id="usable" @click="reGet" :style="{color:reGet_color,backgroundColor:reGet_bgColor}" :disabled="isDis">{{reGet_text}}</button>
					</view>
					<view class="form_inputs">
						<button form-type="submit">提交验证码</button>
					</view>
				</form>
			</view>
			<view class="regin_form" v-show="step_num==3">
				<form @submit="restKey">
					<view class="form_inputs">
						<view class="input_left">
							<icon class="iconfont">&#xe60c;</icon>
						</view>
						<view class="input_right">
							<input type="text" name="UserEmail" />
						</view>
					</view>
					<view class="form_inputs">
						<button form-type="submit">提交新密码</button>
					</view>
				</form>
			</view>
			<view class="gotoLogin" @click="goLogin">
				重置完成,去登陆
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue'
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				step_num: 1,
				times: 10,
				reGet_text: "10秒后重新获取",
				isDis: true,
				reGet_color: "black",
				reGet_bgColor: "white",
				usable:"false"
			}
		},
		onLoad() {

		},
		methods: {
			second: function() {
				var auth_timetimer = setInterval(() => {
					this.times--;
					this.reGet_text = this.times + "秒后重新获取"
					if (this.times <= 0) {
						this.back_state();
						this.isDis=false
						clearInterval(auth_timetimer);
						this.times=10
					}
				}, 1000);
			},
			change_state:function(){
				this.reGet_color='black'
				this.reGet_bgColor='white'
				this.reGet_text=this.times+'秒后重新获取'
			},
			back_state:function(){
				this.reGet_color='white'
				this.reGet_bgColor='coral'
				this.reGet_text='重新获取'
			},
			sendMail: function() {
				console.log("点击了第一个按钮")
				this.step_num = 2
				this.second()
			},
			confirmMsg: function() {
				console.log("点击了第二个按钮")
				this.step_num = 3
			},
			restKey: function() {
				console.log("点击了第三个按钮")
			},
			goLogin: function() {
				uni.redirectTo({
					url: "login"
				})
			},
			reGet: function() {
				if (this.isDis) {
					this.isDis=false
					this.change_state();
					this.second();
				} else {
					console.log("重新获取");
					this.isDis=true
					this.change_state();
					this.second();
				}
			}
		}
	}
</script>

<style>
	@import url("forget.css");
</style>
